<template>
  <view class="claim">
    <view class="box">
      <view class="title">包裹信息</view>
      <view class="line">快递单号：{{productInfo.track||''}}</view>
      <view>送达仓库：{{productInfo.warehouse||''}}</view>
    </view>
    <view class="box">
      <view class="title">物品信息</view>
	  <view v-for="item in productInfo.info">
	  	<view class="line flex">
	  	  <view class="rightmargin">类型：{{productInfo.type_name||''}}</view>
	  	  <view class="leftmargin">名称：{{item.name||''}}</view>
	  	</view>
	  	<view class="line flex">
	  	  <view class="rightmargin">数量：{{item.num||''}}</view>
	  	  <view class="leftmargin">规格：{{item.spe||''}}</view>
	  	</view>
	  	<view class="flex">
	  	  <view class="rightmargin">品牌：{{item.brand||''}}</view>
	  	  <view class="leftmargin">单价：{{item.price||''}}</view>
	  	</view>
	  </view>
    </view>
    <view class="box">
      <view class="line">
        <view class="title"><text class="count">*</text>单号后五位</view>
        <view class="choose">
          <u-input
            placeholder="请填写单号后五位"
            border="none"
            v-model="notesValue"
            :customStyle="inputStyle"
          ></u-input>
          <!-- placeholderStyle="{'font-size': '28rpx';
        'color':' #999999'}" -->
        </view>
      </view>
    </view>
    <view class="btn" @click="toDetail">提交认领</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 单号后五位
      notesValue: "",
      // 输入框样式
      inputStyle: {
        "background-color": "#F5F5F5",
        "border-radius": "5rpx",
        "padding-left": "43rpx",
        padding: "30rpx",
      },
	  productInfo:''
    };
  },
  onLoad(options) {
	  if(options.info){
		  this.productInfo = JSON.parse(options.info);
	  }
		console.log(this.productInfo," this.productInfo")
  },
  methods: {
    // 提交认领
    toDetail() {
		if(!this.notesValue || this.notesValue.length!=5){
			this.$u.toast("请正确输入单号后五位！");
			return
		}
		this.$api.post({
		    url: "/ebapi/public_api/reservation_claim",
		    data: {
				id: this.productInfo.id,
				track: this.notesValue
			},
		    success: (res) => {
			 this.$u.toast("已经认领");
			 setTimeout(()=>{
				 this.$uniApi.to("/pages/home/noArrived?current=1");
			 })
		    },
		})
    },
  },
};
</script>

<style lang="scss">
.claim {
  .box {
    margin-top: 24rpx;
    padding: 36rpx 36rpx 45rpx;
    box-shadow: 0rpx 2rpx 10rpx 1rpx rgba(0, 0, 0, 0.08);
    border-radius: 16rpx;

    .line {
      margin-bottom: 34rpx;

      .title {
        font-size: $uni-text-size-title;
        margin-bottom: 20rpx;

        .count {
          color: #ff0000;
        }
      }
    }

    .title {
      font-weight: bold;
      font-size: $uni-text-size-title;
      margin-bottom: 35rpx;
    }

    .line {
      margin-bottom: 35rpx;
    }

    .rightmargin {
      flex: 1;
    }

    .leftmargin {
      flex: 1;
    }
  }

  .btn {
    text-align: center;
    color: #ffffff;
    font-size: 32rpx;
    padding: 33rpx 188rpx;
    border-radius: 50rpx;
    font-weight: bold;
    margin: 160rpx 15rpx 93rpx;
    background-color: $uni-color-main;
  }
}
</style>
